<template>
    <div>
        <banner></banner>
        <div class="content">
            <div class="container">
                <div class="item" v-for="li in arr.rightList " :key="li.title" @click="toView(li)">
                    <div class="wrap">
                        <div class="box">
                        <i :class="['icon',li.icon]"></i>
                    </div>
                    <h5>{{li.title}}</h5>
                    <p>{{li.text}}</p>
                    </div>
                </div>
            </div>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script setup>
    import { useRouter } from 'vue-router'
    import {Toast} from 'vant'
    import Banner from '../components/banner/banner.vue'
    import Navbar from '../components/navbar/index.vue'
    import Tabbar from '../components/tabbar/index.vue'
    import { onMounted, reactive, ref } from '@vue/runtime-core'
    import { commonDefinition } from '../../store'

    let arr=reactive({
            rightList:[],
        })

    let userRole = commonDefinition().getUserRole
    onMounted(function(){
        // let myRight = userRole.find(it=>it.id===item.id)

        list.forEach(item=>{
            userRole.map(role=>{
                if(item.id===role.id){
                    arr.rightList.push(item)
                }
            })
        })
    })
    const list =[
        {
            title:'考勤申请',
            id:'SYSTEM-01-01',
            icon:'/apply',
            text:'今日有26条数据待处理',
        },
        {
            title:'考勤抄送',
            id:'SYSTEM-01-01',
            icon:'chaosong',
            text:'今日有26条数据待处理',
            path:'/check'

        },
        {
            title:'考勤记录',
            icon:'chakan',
            id:'SYSTEM-01-01',
            right: 'R',
            text:'今日有26条数据待处理',
            path:'/record'

        },
        {
            title:'考勤审批',
            id:'SYSTEM-01-02',
            right: 'C',
            icon:'shenpi',
            text:'今日有26条数据待处理',
            path:'/approval'
        },
    ]
    const router = useRouter()
    function toView(item){        
        if(!item.path){
            Toast('该功能还未开放')
            return
        }else{
            router.push(item.path)
        }
    }
</script>
<style lang="less" scoped>
    @import '../../style/common.less';
    .content{
        background: @c01;
        width: 100%;
        height: 80vh;
        overflow: scroll;

    }
    .container{
        width: 100%;
        display: flex;
        padding: 20px;
        flex-wrap: wrap;
        .item{
            flex: 0 0 50%;
            .wrap{
            width: 150px;
            height: 160px;
            background: white;
            border: 1px solid #ccc;
            text-align: center;
            border-radius: 5px;
            margin: 10px auto;
            
            .box{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: @c01;
                margin: 30px auto;
                margin-bottom: 10px;

                .icon{
                    display: block;
                    width: 60px;
                    height: 60px;
                    background: url(../../images/icons/shenqing.png) center center /48px 48px no-repeat;
                    &.chaosong{
                        background: url(../../images/icons/chaosong.png) center center /48px 48px no-repeat ; 
                    }
                    &.shenpi{
                        background: url(../../images/icons/shenpi.png) center center /48px 48px no-repeat ; 
                    }
                    &.chakan{
                        background: url(../../images/icons/chakan.png) center center /48px 48px no-repeat ; 
                    }
                    &.userAdd{
                        background: url('../../images/icons/userAdd.png') center center /48px 48px no-repeat ; 
                    }
                    &.applyLeave{
                        background: url('../../images/icons/leaveTotal.png') center center /48px 48px no-repeat ; 
                    }

                }
            }
            h5{
                font-weight: normal;
                margin: 10px 0px 5px;

                font-size:16px;
            }
            p{
                font-size: 12px;
                color: #ccc;
            }
        }
        }

    }
    .van-toast{
        width: 120px;
    }
</style>